<template>
  <div class="container">
    <h3>vue+openlayers: 多边形拐点用RegularShape表示（三角形、矩形、正方形、星形...）</h3>
    <h4>
      <el-form ref="form" :model="form">
        <el-form-item label="活动名称" prop="num">
          <el-input v-model="form.num" prefix-icon="el-icon-search"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="mini" @click="drawPolygon">绘制多边形</el-button>
      <el-button type="primary" size="mini" @click="clear">清除图形</el-button>
    </h4>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import LayerVector from 'ol/layer/Vector';
import SourceVector from 'ol/source/Vector';
import Feature from 'ol/Feature';  // 用来创建要素
import Fill from 'ol/style/Fill'; // 用来创建填充样式
import Stroke from 'ol/style/Stroke'; // 用来创建边线样式
import Style from 'ol/style/Style'; // 用来创建样式
import Text from 'ol/style/Text'; // 用来创建文本样式
import Circle from 'ol/style/Circle'; // 用来创建圆形样式
import RegularShape from 'ol/style/RegularShape'; // 用来创建正方形样式
import Draw from 'ol/interaction/Draw'; // 用来创建绘制交互
import MultiPoint from 'ol/geom/MultiPoint'; // 用来创建多点
import Icon from 'ol/style/Icon'; // 用来创建图标样式
export default {
  data() {
    return {
      map: null,
      draw: null,
      source: new SourceVector({
        wrapX: false // 不允许x轴方向重复
      }),
      form: {
        num: null
      },
    }
  },
  mounted() {
    this.initMap();
  },
  watch: {
    'form.num': {
      handler: function (val) {
        // val只能是整数否则报错并清空输入框，val>99时this.form.num=99, val<0时this.form.num=0
        this.form.num = val.replace(/[^\d]/g, '').replace(/^0+/, '').replace(/^[1-9]\d{2,}/, '99');
        
      },
      deep: true
    }
  },
  methods: {
    initMap() {
      let layer = new Tile({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
        })
      })
      let drawLayer = new LayerVector({
        source: this.source,
        style: [
          new Style({
            fill: new Fill({
              color: 'transparent'
            }),
            stroke: new Stroke({
              color: 'red',
              width: 2
            })
          }),
          // 正方形
          // new Style({
          //   image: new RegularShape({
          //     points: 4,  // 正方形
          //     radius: 10, // 半径
          //     angle: Math.PI / 4, // 旋转45度
          //     fill: new Fill({
          //       color: '#ffcc33'
          //     }),
          //     stroke: new Stroke({
          //       color: '#ffcc33',
          //       width: 2
          //     })
          //   }),
          //   geometry: function(feature) {
          //     let coordinates = feature.getGeometry().getCoordinates()[0]; // 获取坐标
          //     return new MultiPoint(coordinates); // 返回多点
          //   }
          // }),
          // 三角形
         /*  new Style({
            image: new RegularShape({
              points: 3,  // 三角形
              radius: 10, // 半径
              angle: 0, // 旋转45度
              fill: new Fill({
                color: '#ffcc33'
              }),
              stroke: new Stroke({
                color: '#ffcc33',
                width: 2
              })
            }),
            geometry: function(feature) {
              let coordinates = feature.getGeometry().getCoordinates()[0]; // 获取坐标
              return new MultiPoint(coordinates); // 返回多点
            }
          }), */
          // 长方形
          /* new Style({
            image: new RegularShape({
              points: 4,  // 五角星
              radius: 10 / Math.SQRT2, // 半径
              radius2: 10,
              angle: 0, // 旋转45度
              scale: [1, 0.5], // 水平和垂直缩放比例
              fill: new Fill({
                color: '#ffcc33'
              }),
              stroke: new Stroke({
                color: '#ffcc33',
                width: 2
              }),
            }),
            geometry: function(feature) {
              let coordinates = feature.getGeometry().getCoordinates()[0]; // 获取坐标
              return new MultiPoint(coordinates); // 返回多点
            }
          }) */

          // 五角星
          /* new Style({
            image: new RegularShape({
              points: 5,  // 五角星
              radius: 10, // 半径
              radius2: 4,
              angle: 0, // 旋转45度
              fill: new Fill({
                color: '#ffcc33'
              }),
              stroke: new Stroke({
                color: '#ffcc33',
                width: 2
              }),
            }),
            geometry: function(feature) {
              let coordinates = feature.getGeometry().getCoordinates()[0]; // 获取坐标
              return new MultiPoint(coordinates); // 返回多点
            }
          }) */
          
          // 圆形
          /* new Style({
            image: new Circle({
              radius: 10,
              fill: new Fill({
                color: '#ffcc33'
              }),
              stroke: new Stroke({
                color: '#ffcc33',
                width: 2
              })
            }),
            geometry: function(feature) {
              let coordinates = feature.getGeometry().getCoordinates()[0]; // 获取坐标
              return new MultiPoint(coordinates); // 返回多点
            }
          }) */

          // 文本
          /* new Style({
            text: new Text({
              text: '文本',
              font: 'bold 14px 微软雅黑',
              fill: new Fill({
                color: '#ffcc33'
              }),
              stroke: new Stroke({
                color: '#ffcc33',
                width: 2
              })
            }),
            geometry: function(feature) {
              let coordinates = feature.getGeometry().getCoordinates()[0]; // 获取坐标
              return new MultiPoint(coordinates); // 返回多点
            }
          }) */

          // 图片
          new Style({
            image: new Icon({
              src: require('@/assets/goutou.png'),
              scale: 0.5
            }),
            geometry: function(feature) {
              let coordinates = feature.getGeometry().getCoordinates()[0]; // 获取坐标
              return new MultiPoint(coordinates); // 返回多点
            }
          })
        ]
      })
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [layer, drawLayer],
        view: new View({
          center: [116.397411, 39.909186],
          zoom: 7,
          projection: 'EPSG:4326'
        })
      })
    },
    
    clear() {
      this.source.clear();
    },
    // 绘制多边形
    drawPolygon() {
      if (this.draw) {
        this.map.removeInteraction(this.draw);
      }
      let type = 'Polygon';
      this.draw = new Draw({
        source: this.source,
        type: type
      })
      this.map.addInteraction(this.draw);
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 750px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 100%;
      height: 720px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>
